<template>
	<view>
		<view class="cu-load load-modal" v-if="isMark">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.png" mode="aspectFit"></image>
			<view class="gray-text">下载中...{{downloadProgress}}% </view>
		</view>
		
	
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">视频详情</block>
		</cu-custom>
		<!-- 视频 -->
		<view class="image">
			<video :src="src" class="fullscr" :poster="poster"  controls></video>
		</view>
		<!-- 视频说明 -->
		<view class="cu-bar bg-mauve shadow-blur solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>视频资料
			</view>
		</view>
		<view class="bg-mauve light padding-tb-sm">
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">视频标题：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{title}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">视频说明：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{remark}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件名：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileName}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">上传人：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{name}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">共享种类：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileNature}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件大小：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{size}}</view>
			</view>
		</view>
		<!-- 下载按钮 -->
		<view class="padding flex flex-direction">
			<!-- #ifdef H5 -->
			<button class="cu-btn bg-blue lg" @tap="h5download">下载</button>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button class="cu-btn bg-blue lg" @tap="download" :disabled="isMark">下载</button>
			<!-- #endif -->
		</view>
		
	</view>

</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed:mapState(['userName','pwd','hasLogin','server']),
		data() {
			return {
				src:'',
				poster:'',
				downloadUrl:'',
				title:'',
				remark:'',
				fileName:'',
				fileNature:'',
				size:'',
				name:'',
				isMark:false,
				downloadProgress:0
			}
		},
		onLoad(e) {
			if(!this.hasLogin){
				uni.redirectTo({
					url:'./login'
				});
				return;
			}
			
			var fileid=e.fileid;
			var serverUrl=this.server.url;
			uni.request({
				url: serverUrl + 'app/findSysFileById',
				method: 'GET',
				sslVerify: false,
				data: {id : fileid},
				success: res => {
					var result= res.data;
					this.src= serverUrl +"media/"+result.fileUuid;
					this.poster= serverUrl + 'sysFile/app/download3?fileUuid='+result.fileUuid;
					this.downloadUrl= serverUrl + 'sysFile/app/download?fileUuid='+result.fileUuid;
					this.title= result.fileTitle;
					this.remark= result.fileRemark;
					this.fileNature = result.fileNature.name;
					this.fileName=result.fileName;
					this.size= result.fileSize;
					this.name= result.uploadsName;
				}
			});
		},
		methods: {
			download(){
				this.downloadProgress=0;
				this.isMark=true;
				/* const downloadTask=uni.downloadFile({
					url: this.downloadUrl,
					success: res => {
						this.move_to_download_dir(res.tempFilePath);
					}
				});
				console.log(downloadTask);
				downloadTask.onProgressUpdate((res)=>{
					this.downloadProgress=res.progress;
				}); */
				var downloadTask= plus.downloader.createDownload(this.downloadUrl,{},(dfile,status)=>{
					var filename=plus.io.convertLocalFileSystemURL( dfile.filename );
					var index = filename.indexOf('Android');
					filename=filename.substr(index-1);
					this.isMark=false;
					uni.showModal({
						title: '文件下载成功',
						content: '文件路径：'+filename,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							
						},
						fail: () => {},
						complete: () => {}
					});
				},()=>{
					this.isMark=false;
				});
				downloadTask.addEventListener('statechanged',(task,status)=>{
					switch(task.state){
						case 3:
							var downloadProgress=Math.floor((task.downloadedSize/this.size)*100) ;
							if(downloadProgress>this.downloadProgress){
								//console.log(downloadProgress+','+this.downloadProgress);
								this.downloadProgress=downloadProgress;
							} 
					}
				},false);
				downloadTask.start();
			},
			h5download(){
				//window.open(this.src);
				show(this.downloadUrl);
			}
		}
	}
	function show(src){
		var myFrame= document.createElement('iframe');
		myFrame.src = src;//服务器路径
		myFrame.style.display = 'none';
		document.body.appendChild(myFrame);
	}
	

</script>

<style>
	.fullscr{
		width:750upx;
	}
	
</style>
